
<template>
  <view class="container">
    <button @click="openPopup">打开删除弹框</button>
    
    <uni-popup
      ref="popup"
      type="center"
      :mask-click="true"
      :animation="true"
      :duration="300"
      @change="popupChange"
    >
      <view class="popup-content">
        <text class="popup-title">删除设备</text>
        <text class="popup-text">确认删除该设备？</text>
        
        <view class="popup-buttons">
          <button
            class="cancel-btn"
            @click="closePopup"
          >
            取消
          </button>
          <button
            class="confirm-btn"
            @click="confirmDelete"
          >
            确认
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import type { UniPopup } from '@dcloudio/uni-ui';

const popup = ref<InstanceType<typeof UniPopup>>();

const openPopup = () => {
  popup.value?.open();
};

const closePopup = () => {
  popup.value?.close();
};

const popupChange = (e: { show: boolean }) => {
  console.log('弹框状态变化:', e.show);
};

const confirmDelete = () => {
  uni.showToast({
    title: '删除成功',
    icon: 'success',
    duration: 2000
  });
  
  closePopup();
  
  // 这里可以执行删除设备的回调函数
  // deleteDevice();
};
</script>

<style>
page {
  height: 100%;
}

.container {
  padding: 40rpx;
}

.popup-content {
  width: 80%;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.popup-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 40rpx;
}

.popup-buttons {
  width: 20%;
  display: flex;
  justify-content:space-evenly;
}

.cancel-btn,
.confirm-btn {
  width: 48%;
  margin: 0;
  padding: 0;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 8rpx;
  font-size: 14px;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background-color: #2979ff;
  color: #fff;
}
</style>

